<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yoursite.com","root":"/","scheme":"Muse","version":"7.7.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="数据基础 js标识符（变量名）都是以uncode编码保存的，utf-8  js中换行符就是执行符。  parseInt和一元加的区别是一元加通过计算进行Number类型转换,parseInt是获取整数  运算符优先级  12345678一级：.  [] new 二级: ++ --三级：一元运算符 ! ~ +num -num typeof void delete四级:% &#x2F; *五级: 双目运算（1+">
<meta property="og:type" content="article">
<meta property="og:title" content="javaScript">
<meta property="og:url" content="http://yoursite.com/2020/03/11/%E5%85%B3%E4%BA%8EJavaScript/index.html">
<meta property="og:site_name" content="李良荣的个人博客">
<meta property="og:description" content="数据基础 js标识符（变量名）都是以uncode编码保存的，utf-8  js中换行符就是执行符。  parseInt和一元加的区别是一元加通过计算进行Number类型转换,parseInt是获取整数  运算符优先级  12345678一级：.  [] new 二级: ++ --三级：一元运算符 ! ~ +num -num typeof void delete四级:% &#x2F; *五级: 双目运算（1+">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-03-11T12:01:09.000Z">
<meta property="article:modified_time" content="2020-03-11T14:53:34.088Z">
<meta property="article:author" content="李良荣">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://yoursite.com/2020/03/11/%E5%85%B3%E4%BA%8EJavaScript/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true
  };
</script>

  <title>javaScript | 李良荣的个人博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <div>
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">李良荣的个人博客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>


<nav class="site-nav">
  
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>Home</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>Archives</a>

  </li>
  </ul>

</nav>
</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content">
            

  <div class="posts-expand">
      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block " lang="en">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/03/11/%E5%85%B3%E4%BA%8EJavaScript/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="李良荣">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="李良荣的个人博客">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          javaScript
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-03-11 20:01:09 / Modified: 22:53:34" itemprop="dateCreated datePublished" datetime="2020-03-11T20:01:09+08:00">2020-03-11</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h2 id="数据基础"><a href="#数据基础" class="headerlink" title="数据基础"></a>数据基础</h2><ol>
<li><p>js标识符（变量名）都是以uncode编码保存的，utf-8</p>
</li>
<li><p>js中换行符就是执行符。</p>
</li>
<li><p>parseInt和一元加的区别是一元加通过计算进行Number类型转换,parseInt是获取整数</p>
</li>
<li><p>运算符优先级 </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">一级：.  [] <span class="keyword">new</span> </span><br><span class="line">二级: ++ --</span><br><span class="line">三级：一元运算符 ! ~ +num -num <span class="keyword">typeof</span> <span class="keyword">void</span> <span class="keyword">delete</span></span><br><span class="line">四级:% <span class="regexp">/ *</span></span><br><span class="line"><span class="regexp">五级: 双目运算（1+2、2+3）</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">六七八九级别：&gt; &gt;= !== &amp; | &amp;&amp; || ?: = += -= </span></span><br><span class="line"><span class="regexp">莫级：,</span></span><br></pre></td></tr></table></figure>

</li>
</ol>
<h2 id="冷门原理"><a href="#冷门原理" class="headerlink" title="冷门原理"></a>冷门原理</h2><ol>
<li><p>引用值的复制会复制地址，值会发生改变。</p>
</li>
<li><p>dom中的原型中没有map方法（数组和对象专属），但是存在forEach(forEach的返回值undefined)</p>
</li>
<li><p>apply（thisObj,needArr）apply中传递的数组第一个是this，第二个是传入的值,apply借用方法时，方法不用加()会自动执行</p>
</li>
<li><p>map与forEach的区别在于map会映射出新的数组，而foreach不会改变元素组，只能在内部进行一些操作</p>
</li>
<li><p>find可以用来查找引用类型的值，解决inclueds/indexOf无法查找引用类型的问题    </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> find = arr.find(<span class="function"><span class="params">v</span>=&gt;</span>&#123;v.name= <span class="string">"llr"</span>&#125;)		就会返回arr中查找到的对象		补充：有点牛逼</span><br></pre></td></tr></table></figure>
</li>
<li><p>每个引用值都有一个地址，每次将一个对象设置为null就会切断该对象与null的地址。当这个地址没有指向的时候就会被js的垃圾回收机制给处理</p>
</li>
<li><p>对象的key在编译时都会转换为字符串类型</p>
</li>
<li><p>let，const声明的变量不是window的属性，不会提前 </p>
</li>
<li><p>…args收集参数后会转化为一个数组</p>
</li>
<li><p>匿名函数的this指向window，箭头函数的this指向上下文。                         技巧：可以使用在方法内部先声明一个self变量指代this属性</p>
</li>
<li><p><strong>map/find/filter/forEach/from</strong>的第二个参数可以指代一个对象（也可以是this）     reduce/sort没有</p>
</li>
<li><p>定时器/延时器都指向window对象</p>
</li>
<li><p>事件函数/对象会一直存储在内存中，可以在使用后手动将其设置为null。提高效率。</p>
</li>
<li><p>结构赋值的对象，他们的引用地址不同。相当于深拷贝</p>
</li>
<li><p>属性都是字符串形式</p>
</li>
<li><p>createElement用来创建节点，create用来创建原型</p>
</li>
</ol>
<h2 id="Dom相关"><a href="#Dom相关" class="headerlink" title="Dom相关"></a>Dom相关</h2><ol>
<li><p>getAttribute(“name”)获取节点中的属性,当属性值为空时：返回null</p>
</li>
<li><p>setAttribute(“like”,true)设置节点的属性，</p>
</li>
<li><p>removeAttribute(“disabled”)移出属性</p>
</li>
<li><p>event.target就是指向元素自身</p>
</li>
</ol>
<h2 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h2><p>作用域：编译阶段创建产物，作用就是把函数变量保存，并且限定函数变量使用范围</p>
<p>作用域链：编译完成后，函数运行出现。作用：连接作用域</p>
<p>es5编译只会在进入函数中触发</p>
<p>es5产生块级作用域的方法，立即执行函数。</p>
<p>垃圾回收机制：为了避免过多占用内存空间，每隔一段时间执行一次</p>
<p>手动管理垃圾回收机制的方法：将值设置为null</p>
<p>js三部曲：词法语法分析（生成作用域）–&gt;生成代码—&gt;执行（生成作用域链）</p>
<p>会改变元素组的方法：reverse、sort</p>
<p><strong>闭包</strong></p>
<p>当内部的函数被保存到外部时（表示还没有被机制回收），就会产生一个闭包，并且能获取到他原本所在作用域的变量</p>
<h2 id="变量声明"><a href="#变量声明" class="headerlink" title="变量声明"></a>变量声明</h2><p>let、const:新增块级作用域（if，for）—闭包解决for循环没有块级作用域的原理。函数是第一公民，具有自己的作用域。</p>
<p>对象增强写法：属性初始化(key,value同名省略)、方法简写（类似java）</p>
<p>优先使用const ，只有需要改变标识符是才使用let</p>
<p>const 必须赋初值，虽是常量，内部属性还是可以修改的buer</p>
<h2 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h2><p>冷知识</p>
<ol>
<li><p>可以使用 in 判断对象是否存在某个属性</p>
</li>
<li><p>函数拥用两个原型：prototype(用于实例化)/–proto–（函数对象的原型）</p>
</li>
<li><p>原型之间的继承是在原型的基础上继承(obj.–proto–.–proto– = cbj.–proto–)</p>
</li>
<li><p>let obj = Object.create(Object)实际上是创建了一个obj对象，并且以Object作为obj的原型</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//原型继承中最关键的一步，最迷惑我的一步</span></span><br><span class="line">Admin.prototype.__proto__ === User.prototype</span><br></pre></td></tr></table></figure>

</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">Person.prototype.constructor===Person	<span class="comment">//true	Person原型的constructor就是person（原型闭环）</span></span><br><span class="line">Person.prototype === person.__proto__	<span class="comment">//true	构造函数的原型就是实例的__proto__属性</span></span><br><span class="line"></span><br><span class="line">person.hasOwnProperty(<span class="string">"like"</span>)			<span class="comment">//false	判断对象上是否含有like属性或方法（不包括原型）</span></span><br><span class="line"><span class="built_in">Object</span>.getPrototypeOf(person)			<span class="comment">//like	只获取原型上的属性和方法</span></span><br><span class="line"><span class="built_in">Object</span>.getOwnPropertyNames(person)		<span class="comment">//["name","age"]	只获取自身的属性和方法</span></span><br></pre></td></tr></table></figure>

<p>原型设置与修改的标准用法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> man = &#123;<span class="attr">name</span>:<span class="string">"man"</span>&#125;</span><br><span class="line"><span class="keyword">let</span> person = &#123;<span class="attr">name</span>:<span class="string">"person"</span>,show()&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.name</span><br><span class="line">&#125;&#125;</span><br><span class="line"><span class="comment">//设置原型</span></span><br><span class="line"><span class="built_in">Object</span>.setPrototypeOf(man,person)</span><br><span class="line"><span class="comment">//获取原型</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getPrototypeOf(man))	<span class="comment">//person</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//检测arr的原型上是否有Array</span></span><br><span class="line">arr <span class="keyword">instanceof</span> <span class="built_in">Array</span></span><br><span class="line"><span class="comment">//检测对象是否在另一个对象的原型链上</span></span><br><span class="line"><span class="keyword">let</span> father = &#123;<span class="attr">name</span>:<span class="string">"father"</span>&#125;</span><br><span class="line"><span class="keyword">let</span> son= &#123;<span class="attr">name</span>:<span class="string">"son"</span>&#125;</span><br><span class="line"><span class="built_in">Object</span>.setPrototypeOf(son,father)			<span class="comment">//设置father为son的原型</span></span><br><span class="line"><span class="built_in">console</span>.log(father.isPrototypeOf(son))		<span class="comment">//true</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//自定义一个instanceOf 方法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myInstanceOf</span>(<span class="params">cur,proto</span>) </span>&#123;  </span><br><span class="line">	<span class="keyword">if</span>(!cur.__proto__) <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">	<span class="keyword">if</span>(cur.__proto__ == proto.prototype) <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">	<span class="keyword">return</span> myIns(cur.__proto__,proto)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="新增"><a href="#新增" class="headerlink" title="新增"></a>新增</h2><p><strong>短路或运算</strong>：先看第一个表达式是否为真，为真的话就采用第一个表达式</p>
<p><strong>默认形参</strong>：形参可以赋值，传入的新参会覆盖赋值的形参</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">a,b=<span class="number">1</span></span>) </span>&#123;  </span><br><span class="line">	<span class="keyword">return</span> a+b</span><br><span class="line">&#125;</span><br><span class="line">sum(<span class="number">1</span>)		<span class="comment">//2</span></span><br></pre></td></tr></table></figure>

<p><strong>模板字面量</strong>：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">`<span class="subst">$&#123;firstname&#125;</span><span class="subst">$&#123;lastname&#125;</span>`</span>-----&gt;‘李良荣’</span><br><span class="line">$&#123;变量&#125;---》字符串变量</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.table(arr)-----&gt;将arr以表格的形式打印</span><br></pre></td></tr></table></figure>

<p><strong>循环</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> div <span class="keyword">of</span> divs)遍历div里边的value</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> div <span class="keyword">in</span> divs)遍历div里边的key(包括原型)</span><br></pre></td></tr></table></figure>

<p><strong>bind</strong>:跟call相似，bind会把函数赋值给对象，当不会立即执行</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="built_in">module</span> = &#123;</span><br><span class="line">  name:<span class="string">"module"</span>,</span><br><span class="line">  getX: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.name)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> name = <span class="string">"windowName"</span></span><br><span class="line"><span class="built_in">module</span>.getX.bind(<span class="built_in">window</span>)()</span><br></pre></td></tr></table></figure>

<h2 id="Symbol"><a href="#Symbol" class="headerlink" title="Symbol"></a>Symbol</h2><p>一类新的数组类型（永远不会重复的字符串）类似于vue里的key，Symbol不可迭代</p>
<p>使用场景：防止属性被更改</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//声明Symbol的两种方式</span></span><br><span class="line"><span class="keyword">let</span> a = <span class="built_in">Symbol</span>(<span class="string">"a"</span>)		<span class="comment">//没有定义在全局</span></span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">Symbol</span>.for(<span class="string">"b"</span>)	<span class="comment">//定义在全局</span></span><br><span class="line"><span class="comment">//可以使用symbol.keyFor(b)获取全局symbol的描述</span></span><br><span class="line"><span class="comment">//可以使用a.description获取symbol的描述</span></span><br><span class="line"><span class="built_in">console</span>.log(a.description,<span class="built_in">Symbol</span>.keyFor(b)) <span class="comment">//a,b</span></span><br><span class="line"><span class="comment">//当声明的全局symbol描述相同时，他们相等</span></span><br><span class="line"><span class="keyword">let</span> c = <span class="built_in">Symbol</span>.for(<span class="string">"a"</span>)	</span><br><span class="line"><span class="built_in">console</span>.log(c===b)	<span class="comment">//true</span></span><br></pre></td></tr></table></figure>



<h2 id="Array"><a href="#Array" class="headerlink" title="Array"></a>Array</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">将元素或者字符串转化为数组</span><br><span class="line"><span class="built_in">Array</span>.from(eles,<span class="function"><span class="keyword">function</span>(<span class="params">ele</span>)</span>&#123;</span><br><span class="line">    ele.style.color= <span class="string">"red"</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.push/unshift(...arr2)		result----》增加返回长度</span><br><span class="line"><span class="built_in">Array</span>.pop/shift()				result-----&gt;删除返回被删除的数</span><br><span class="line"><span class="built_in">Array</span>.slice(<span class="keyword">from</span>,end)			复制数组的作用，不包含end,只传一个参数表示复制<span class="keyword">from</span>后的，包括<span class="keyword">from</span></span><br><span class="line"><span class="built_in">Array</span>.splice(<span class="keyword">from</span>,num,repalcevalue)		----&gt;改变数组，result-----&gt;被删除的数组</span><br><span class="line"><span class="built_in">Array</span>.includes（target）		   result---&gt;<span class="literal">true</span>/<span class="literal">false</span></span><br><span class="line"><span class="built_in">Array</span>.find(<span class="function"><span class="params">item</span>=&gt;</span>item.name == <span class="string">"xxx"</span>)	result ---&gt;返回查找到的数组元素/所在的位置（findIndex）</span><br><span class="line"><span class="built_in">Array</span>.join(参数)					<span class="comment">//将数组以参数进行连接</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> [age,year] = [<span class="number">18</span>,<span class="number">2020</span>]     解构赋值</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> res = cart.sort(<span class="function">(<span class="params">a,b</span>)=&gt;</span>a.price-b.price)			数组排序，更改原数组</span><br></pre></td></tr></table></figure>

<h2 id="Math"><a href="#Math" class="headerlink" title="Math"></a>Math</h2><p>ceil/floor/round:向上/下/四舍五入取整</p>
<h2 id="Set"><a href="#Set" class="headerlink" title="Set"></a>Set</h2><p>Set的作用就是去除重复项.</p>
<p>Set是一个对象,返回值是一个具有size的类数组对象（size代替了length）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="keyword">set</span> = new Set("a12223") 创建<span class="keyword">set</span>对象</span><br><span class="line">let res = <span class="keyword">set</span>.values()		获取<span class="keyword">set</span>对象</span><br><span class="line">let boo = <span class="keyword">set</span>.has("a")		判断是否含有某个值</span><br><span class="line">							注：遍历<span class="keyword">set</span>时，<span class="keyword">set</span>的index和value是一样的</span><br></pre></td></tr></table></figure>

<h2 id="Map"><a href="#Map" class="headerlink" title="Map"></a>Map</h2><p>Map是一个对象，他的键不区分类型，不过还是要保留键名的唯一性</p>
<p>Map返回自身，所以他可以链式调用</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">map.set(<span class="string">"obj"</span>,<span class="string">"hei"</span>).set(<span class="string">"name"</span>,<span class="string">"llr"</span>).set(<span class="string">"age"</span>,<span class="number">20</span>)</span><br><span class="line"><span class="keyword">let</span> <span class="keyword">get</span> = map.<span class="keyword">get</span>("age")		//20</span><br><span class="line">let has = map.has("abc")		//false</span><br><span class="line">let del = map.delete("name")	//true</span><br><span class="line">console.log(<span class="keyword">get</span>,has,del)		result----&gt;20,false,true</span><br><span class="line">console.log(map)				result ----&gt;Map(2) &#123;<span class="string">"obj"</span> =&gt; <span class="string">"hei"</span>, <span class="string">"age"</span> =&gt; <span class="number">20</span>&#125;</span><br><span class="line"><span class="keyword">let</span> clear =map.clear()			<span class="comment">//undefined</span></span><br><span class="line"><span class="built_in">console</span>.log(map)				result ----&gt;<span class="built_in">Map</span>(<span class="number">0</span>) &#123;&#125;</span><br></pre></td></tr></table></figure>

<p>map中的值需要是一个数组或者[[1,”aaa”],[2,”bbb”]]形式的数组</p>
<p>keys,values,entries方法返回的都是类类数组对象</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> map = <span class="keyword">new</span> <span class="built_in">Map</span>([[<span class="string">"key"</span>,<span class="string">"value"</span>]])</span><br><span class="line">map.set(<span class="string">"d"</span>,<span class="string">"ddd"</span>)</span><br><span class="line"><span class="keyword">let</span> key = map.keys()			result---&gt;&#123;<span class="string">"key"</span>, <span class="number">2</span>, <span class="string">"d"</span>&#125;</span><br><span class="line"><span class="keyword">let</span> value = map.values()		result---&gt;&#123;<span class="string">"value"</span>, <span class="string">"bbb"</span>, <span class="string">"ddd"</span>&#125;</span><br><span class="line"><span class="keyword">let</span> entries = map.entries() 	result---&gt;&#123;<span class="string">"key"</span> =&gt; <span class="string">"value"</span>, <span class="number">2</span> =&gt; <span class="string">"bbb"</span>, <span class="string">"d"</span> =&gt; <span class="string">"ddd"</span>&#125;</span><br></pre></td></tr></table></figure>

<p>map也有forEach方法不过他的形参时(value,key)</p>
<h2 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h2><p>作用： 代理可以对对象进行拦截，以及对数据读取、修改的过滤保护。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> man = &#123;<span class="attr">name</span>:<span class="string">"llr"</span>,<span class="attr">like</span>:<span class="string">"yellow"</span>&#125;</span><br><span class="line"><span class="keyword">const</span> proxy  = <span class="keyword">new</span> <span class="built_in">Proxy</span>(man,&#123;</span><br><span class="line">	<span class="keyword">set</span>(target,key,value)&#123;</span><br><span class="line">		<span class="keyword">return</span> prop ===<span class="string">"like"</span>?<span class="string">""</span>:target[key]=value</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="keyword">get</span>(target,key)&#123;</span><br><span class="line">		<span class="keyword">return</span> target[key]</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<h2 id="demo"><a href="#demo" class="headerlink" title="demo"></a>demo</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//为arr编号</span></span><br><span class="line"><span class="keyword">let</span> arr = [&#123;<span class="attr">name</span>:<span class="string">"llr"</span>,<span class="attr">age</span>:<span class="number">18</span>&#125;,&#123;<span class="attr">name</span>:<span class="string">"xss"</span>,<span class="attr">age</span>:<span class="number">22</span>&#125;,&#123;<span class="attr">name</span>:<span class="string">"mt"</span>,<span class="attr">age</span>:<span class="number">68</span>&#125;]</span><br><span class="line"><span class="keyword">let</span> num = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">let</span> res = arr.reduce(<span class="function">(<span class="params">pre,cur,index</span>)=&gt;</span>&#123;</span><br><span class="line">		id = <span class="string">`id<span class="subst">$&#123;++num&#125;</span>`</span></span><br><span class="line">		<span class="keyword">return</span> pre = &#123;...pre,[id]:cur&#125;</span><br><span class="line">&#125;,&#123;&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">JSON</span>.stringify(res,<span class="literal">null</span>,<span class="number">2</span>))	<span class="comment">//转json格式</span></span><br></pre></td></tr></table></figure>

<h2 id="Object"><a href="#Object" class="headerlink" title="Object"></a>Object</h2><p>对象浅拷贝</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;<span class="attr">name</span>:<span class="string">"llr"</span>&#125;</span><br><span class="line"><span class="keyword">let</span> b = &#123;<span class="attr">age</span>:<span class="number">18</span>&#125;</span><br><span class="line"><span class="keyword">let</span> c = <span class="built_in">Object</span>.assign(a,b)		返回并改变a数组 reslut---&gt;&#123;<span class="attr">name</span>:<span class="string">"llr"</span>，age:<span class="number">18</span>&#125;</span><br><span class="line"><span class="keyword">let</span> d = &#123;...a,...b&#125;				---&gt;&#123;<span class="attr">name</span>:<span class="string">"llr"</span>，age:<span class="number">18</span>&#125;</span><br></pre></td></tr></table></figure>

<p>对象深拷贝</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">copy</span>(<span class="params">source</span>) </span>&#123; </span><br><span class="line">	<span class="keyword">let</span> target = &#123;&#125; </span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">let</span> key <span class="keyword">in</span> source)&#123;</span><br><span class="line">		<span class="keyword">let</span> value = source[key]</span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> value ==<span class="string">"object"</span>)&#123;</span><br><span class="line">			target[key] =	value <span class="keyword">instanceof</span> <span class="built_in">Array</span>?[...value]:copy(value)</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			target[key]=value</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">return</span> target</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>对象迭代—&gt;返回数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">name</span>:<span class="string">"llr"</span>,<span class="attr">age</span>:<span class="number">33</span>&#125;</span><br><span class="line"><span class="keyword">let</span> a = <span class="built_in">Object</span>.keys(obj)</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">Object</span>.values(obj)</span><br><span class="line"><span class="keyword">let</span> c = <span class="built_in">Object</span>.entries(obj)</span><br><span class="line"><span class="built_in">console</span>.log(a,b,c)</span><br></pre></td></tr></table></figure>

<p><strong>对象之属性特征（属性控制）</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">name</span>:<span class="string">"obj"</span>&#125;		</span><br><span class="line"><span class="comment">//查看obj的name属性的所有特性</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">JSON</span>.stringify(<span class="built_in">Object</span>.getOwnPropertyDescriptor(obj,<span class="string">"name"</span>),<span class="literal">null</span>,<span class="number">2</span>))</span><br><span class="line"><span class="comment">//打印结果如下</span></span><br><span class="line">&#123;<span class="string">"name"</span>: &#123;</span><br><span class="line">    <span class="string">"value"</span>: <span class="string">"obj"</span>,				<span class="comment">//值</span></span><br><span class="line">    <span class="string">"writable"</span>: <span class="literal">true</span>,			<span class="comment">//是否读写</span></span><br><span class="line">    <span class="string">"enumerable"</span>: <span class="literal">true</span>,			<span class="comment">//是否可迭代</span></span><br><span class="line">    <span class="string">"configurable"</span>: <span class="literal">true</span>&#125;		<span class="comment">//是否可以配置/删除/修改</span></span><br><span class="line"> <span class="comment">//修改特性方法</span></span><br><span class="line"> <span class="built_in">Object</span>.defineProperty(obj,<span class="string">"name"</span>,&#123;</span><br><span class="line">	value:<span class="string">"newName"</span>,</span><br><span class="line">	writable:<span class="literal">true</span>,</span><br><span class="line">	enumerable:<span class="literal">true</span>,</span><br><span class="line">	configurable:<span class="literal">false</span></span><br><span class="line">&#125;)</span><br><span class="line"> <span class="comment">//设置对象是否可以添加属性</span></span><br><span class="line"> <span class="comment">//Object.preventExtensions(obj);	禁止对象添加属性</span></span><br><span class="line"><span class="keyword">if</span>(<span class="built_in">Object</span>.isExtensible(obj))&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"当前禁止对象添加属性 "</span>)</span><br><span class="line">	obj.site = <span class="string">"site"</span></span><br><span class="line">&#125;</span><br><span class="line"> <span class="comment">//设置对象封闭状态</span></span><br><span class="line"><span class="built_in">Object</span>.seal(obj)	<span class="comment">//封闭对象</span></span><br><span class="line"><span class="keyword">if</span>(<span class="built_in">Object</span>.isSealed)&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">"当前为封闭状态"</span>)</span><br><span class="line">&#125;</span><br><span class="line"> <span class="comment">//设置对象冻结状态</span></span><br><span class="line"><span class="built_in">Object</span>.freeze(obj)</span><br><span class="line"><span class="keyword">if</span>(<span class="built_in">Object</span>.isFrozen(obj))&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">"当前为冻结状态"</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//访问器保护机制</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">	data:&#123;<span class="attr">name</span>:<span class="string">"obj"</span>,<span class="attr">age</span>:<span class="number">10</span>&#125;,</span><br><span class="line">	<span class="keyword">set</span> age(value)&#123;</span><br><span class="line">		value&gt;<span class="number">20</span>?<span class="built_in">console</span>.log(<span class="string">"太老了"</span>):<span class="keyword">this</span>.data.age = value</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="keyword">get</span> age()&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="keyword">this</span>.data.age +<span class="string">"岁"</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">obj.age =<span class="number">12</span></span><br><span class="line"><span class="built_in">console</span>.log(obj.age)</span><br></pre></td></tr></table></figure>

<h2 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h2><p>补充知识：处理数据时，obj.onload=callback表示加载成功的回调函数，obj.onerror=callback加载失败的回调函数</p>
<p>主线程：优先执行主线程任务，（注：Promise参数中的函数也属于主线程任务，只有当promise参数中的函数执行时，才会产生微任务。）</p>
<p>微任务：</p>
<ol>
<li>promise产生的任务队列，优先级要比宏任务高,</li>
<li>promise单一状态且不可逆转，只会处理一个结果</li>
<li>promise链式调用时会默认为成功状态，并且promise需要等上一个执行完成才能调用then(任务队列)</li>
<li>可以使用catch(fn)批量处理错误，finally(fn)处理等待动画</li>
</ol>
<p>宏任务：异步产生的数据队列</p>
<h2 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//实现Admin继承User</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">User</span>(<span class="params">name,age</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">this</span>.name = name;</span><br><span class="line">	<span class="keyword">this</span>.age = age</span><br><span class="line">&#125;</span><br><span class="line">User.prototype.show = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; </span><br><span class="line">	<span class="built_in">console</span>.log(<span class="keyword">this</span>.name,<span class="keyword">this</span>.age)</span><br><span class="line"> &#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Admin</span>(<span class="params">...args</span>) </span>&#123; </span><br><span class="line">	User.apply(<span class="keyword">this</span>,args)</span><br><span class="line"> &#125;</span><br><span class="line"><span class="comment">//封装一个extend方法</span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">extend</span>(<span class="params">target,source</span>) </span>&#123;  </span><br><span class="line">	 target.prototype = <span class="built_in">Object</span>.create(source.prototype);</span><br><span class="line">	 <span class="built_in">Object</span>.defineProperty(target.prototype,<span class="string">"constructor"</span>,&#123;</span><br><span class="line">		 value:target,</span><br><span class="line">		 enumerable:<span class="literal">false</span></span><br><span class="line">	 &#125;)</span><br><span class="line"> &#125;</span><br><span class="line"> extend(Admin,User)</span><br><span class="line"><span class="keyword">var</span> user = <span class="keyword">new</span> User(<span class="string">'user'</span>,<span class="number">88</span>)</span><br><span class="line"><span class="keyword">var</span> ad = <span class="keyword">new</span> Admin(<span class="string">'lsi'</span>,<span class="number">20</span>)</span><br><span class="line"><span class="built_in">console</span>.log(user.constructor,ad.constructor)</span><br></pre></td></tr></table></figure>

<p>对象多继承实现(mixin)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//多继承</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">User</span>(<span class="params">name,age</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">this</span>.name = name;</span><br><span class="line">	<span class="keyword">this</span>.age = age</span><br><span class="line">&#125;</span><br><span class="line">User.prototype.show = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; </span><br><span class="line">	<span class="built_in">console</span>.log(<span class="keyword">this</span>.name,<span class="keyword">this</span>.age)</span><br><span class="line"> &#125;</span><br><span class="line"><span class="keyword">const</span> request = &#123;</span><br><span class="line">	Ajax()&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="keyword">this</span>)</span><br><span class="line">	&#125;</span><br><span class="line"> &#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Menber</span> (<span class="params">name,age</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//call继承属性</span></span><br><span class="line">	User.call(<span class="keyword">this</span>,name,age)</span><br><span class="line">&#125;</span><br><span class="line">	<span class="comment">//原型继承方法</span></span><br><span class="line">Menber.prototype = <span class="built_in">Object</span>.create(User.prototype);</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(Menber.prototype,<span class="string">"constructor"</span>,&#123;</span><br><span class="line">	value:Menber,</span><br><span class="line">	enumerable:<span class="literal">false</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//mixin</span></span><br><span class="line">Menber.prototype = <span class="built_in">Object</span>.assign(Menber.prototype,request)</span><br><span class="line"><span class="keyword">let</span> man = <span class="keyword">new</span> Menber(<span class="string">"MAN"</span>,<span class="number">18</span>)</span><br><span class="line">man.Ajax()</span><br></pre></td></tr></table></figure>

<h2 id="class"><a href="#class" class="headerlink" title="class"></a>class</h2><ol>
<li>类实际上就是原型构造函数的语法糖，继承中super(参数)一定要有并传参</li>
<li>类的constructor(){}函数，也就是类自身</li>
<li>static静态方法，实际上就是构造函数自身的方法，私有方法与es5原型有一点点差异</li>
<li>继承中，可以简单的把super理解为当前对象的proto（用作原型攀升）</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">super &#x3D;&#x3D;&#x3D; this.__proto__;		this指实例对象</span><br><span class="line">static&#x3D;&#x3D;&#x3D; User自身的方法			 user指构造函数</span><br><span class="line">ClassName &#x3D;&#x3D;&#x3D; this.constructor</span><br></pre></td></tr></table></figure>

<h2 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h2><p>模块化会自动使用严格模式</p>
<p>起别名 * as api</p>
<p>默认导出 全部 defalt </p>

    </div>

    
    
    

      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item"></div>
      <div class="post-nav-item">
    <a href="/2020/03/12/vue%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95/" rel="next" title="vue基本语法">
      vue基本语法 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  

  </div>


          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#数据基础"><span class="nav-number">1.</span> <span class="nav-text">数据基础</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#冷门原理"><span class="nav-number">2.</span> <span class="nav-text">冷门原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Dom相关"><span class="nav-number">3.</span> <span class="nav-text">Dom相关</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#作用域"><span class="nav-number">4.</span> <span class="nav-text">作用域</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#变量声明"><span class="nav-number">5.</span> <span class="nav-text">变量声明</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#原型"><span class="nav-number">6.</span> <span class="nav-text">原型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#新增"><span class="nav-number">7.</span> <span class="nav-text">新增</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Symbol"><span class="nav-number">8.</span> <span class="nav-text">Symbol</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Array"><span class="nav-number">9.</span> <span class="nav-text">Array</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Math"><span class="nav-number">10.</span> <span class="nav-text">Math</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Set"><span class="nav-number">11.</span> <span class="nav-text">Set</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Map"><span class="nav-number">12.</span> <span class="nav-text">Map</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Proxy"><span class="nav-number">13.</span> <span class="nav-text">Proxy</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#demo"><span class="nav-number">14.</span> <span class="nav-text">demo</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Object"><span class="nav-number">15.</span> <span class="nav-text">Object</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Promise"><span class="nav-number">16.</span> <span class="nav-text">Promise</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#继承"><span class="nav-number">17.</span> <span class="nav-text">继承</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#class"><span class="nav-number">18.</span> <span class="nav-text">class</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#模块化"><span class="nav-number">19.</span> <span class="nav-text">模块化</span></a></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">李良荣</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">2</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">李良荣</span>
</div>
  <div class="powered-by">Powered by <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> v4.2.0
  </div>
  <span class="post-meta-divider">|</span>
  <div class="theme-info">Theme – <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> v7.7.2
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>




  















  

  

</body>
</html>
